<template>
  <view>
    <!-- 排序标签 -->
    <view class="store-sort">
      <view class="sort-item active">
        <text>综合</text>
      </view>
      <view class="sort-item">
        <text>销量</text>
      </view>
      <view class="sort-item sort-item-price">
        <text>价格</text>
        <view class="price-arrow">
          <view class="icon up active">
            <text class="iconfont icon-arrow-up"></text>
          </view>
          <view class="icon down active">
            <text class="iconfont icon-arrow-down"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list clearfix column-2">
      <!-- 商品项 -->
      <view
        class="goods-item"
        v-for="i in listData.data"
        :key="i.goods_id"
        @click="goDetail(i.goods_id)"
      >
        <view>
          <!-- 商品图片 -->
          <view class="goods-image">
            <image class="image" mode="aspectFill" :src="i.goods_image"></image>
          </view>
          <view class="detail">
            <!-- 商品标题 -->
            <view class="goods-name">
              <text class="twoline-hide">{{ i.goods_name }}</text>
            </view>
            <!-- 商品价格 -->
            <view class="detail-price oneline-hide">
              <text class="goods-price f-30 col-m"
                >￥{{ i.goods_price_min }}</text
              >
              <text class="line-price col-9 f-24"
                >￥{{ i.goods_price_max }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { list } from '@/api/goods'
export default {
  data () {
    return {
      listData: {}
    }
  },
  onLoad () {
    this.getListData()
  },
  methods: {
    async getListData () {
      const { data } = await list()
      this.listData = data.list
    },
    goDetail (id) {
      uni.navigateTo({ url: `/pages/goods/detail?id=${id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
// 页面头部
.header {
  display: flex;
  align-items: center;
  background-color: #fff;

  // 搜索框
  .search {
    flex: 1;
  }

  // 切换显示方式
  .show-view {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 36rpx;
    color: #505050;
  }
}

// 排序组件
.store-sort {
  position: sticky;
  top: var(--window-top);
  display: flex;
  padding: 20rpx 0;
  font-size: 28rpx;
  background: #fff;
  color: #000;
  z-index: 99;

  .sort-item {
    flex-basis: 33.3333%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50rpx;

    &.active {
      color: #e49a3d;
    }
  }

  .sort-item-price .price-arrow {
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #000;

    .icon {
      &.active {
        color: #e49a3d;
      }

      &.up {
        margin-bottom: -16rpx;
      }

      &.down {
        margin-top: -16rpx;
      }
    }
  }
}

// 商品列表
.goods-list {
  padding: 4rpx;
  box-sizing: border-box;
}

// 单列显示
.goods-list.column-1 {
  .goods-item {
    width: 100%;
    height: 280rpx;
    margin-bottom: 12rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.6;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .goods-item_left {
    display: flex;
    width: 300rpx;
    background: #fff;
    align-items: center;

    .image {
      display: block;
      width: 240rpx;
      height: 240rpx;
    }
  }

  .goods-item_right {
    position: relative;
    // width: 450rpx;
    flex: 1;

    .goods-name {
      margin-top: 10rpx;
      min-height: 68rpx;
      line-height: 1.3;
      white-space: normal;
      color: #484848;
      font-size: 26rpx;
    }
  }

  .goods-item_desc {
    margin-top: 8rpx;
  }

  .desc-selling_point {
    width: 400rpx;
    font-size: 24rpx;
    color: #e49a3d;
  }

  .desc-goods_sales {
    color: #999;
    font-size: 24rpx;
  }

  .desc_footer {
    font-size: 24rpx;

    .price_x {
      margin-right: 16rpx;
      color: #f03c3c;
      font-size: 30rpx;
    }

    .price_y {
      text-decoration: line-through;
    }
  }
}

// 平铺显示
.goods-list.column-2 {
  .goods-item {
    width: 50%;
  }
}

.goods-item {
  float: left;
  box-sizing: border-box;
  padding: 6rpx;

  .goods-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;

    &:after {
      content: '';
      display: block;
      margin-top: 100%;
    }

    .image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }

  .detail {
    padding: 8rpx;
    background: #fff;

    .goods-name {
      min-height: 68rpx;
      line-height: 32rpx;
      white-space: normal;
      color: #484848;
      font-size: 26rpx;
    }

    .detail-price {
      .goods-price {
        margin-right: 8rpx;
      }

      .line-price {
        text-decoration: line-through;
      }
    }
  }
}
</style>
